<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    //DOM 0级事件模型,缺陷：只支持一个DOM事件处理函数
    //<input type="button" onclick="doSomething()"/>
    //.input.onlick=function(){}
    <p id="example" onclick="console.log('Click');console.log('Click2');">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis praesentium, sapiente? Earum, molestiae rem. Enim, perspiciatis quisquam! A consequatur culpa error et, natus nobis placeat qui rem, suscipit tempora tenetur.
    </p>
    <div id="p1">
        <div id="p1-1">
            <div id="p1-1-1">
                <div id="p1-1-1-1">
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet architecto beatae delectus enim ipsum iusto laborum, libero minus perspiciatis quae quidem rem sed soluta velit veniam voluptatem voluptates voluptatibus. Repudiandae.
                    </p>
                </div>
            </div>
        </div>
    </div>
    <script>
        //只能添加一个时间函数，如果在后面添加，就会把前面的覆盖
        document.getElementById('example').onclick = function(event) {
            event = event || window.event;
            console.log('click me');
        };
        //事件冒泡：点击子元素，会依次向上查询父元素有没有事件模型并执行
        document.getElementById('p1').onclick = function() {
            console.log('p1');
        };
        document.getElementById('p1-1').onclick = function() {
            console.log('p1-1');
        };
        document.getElementById('p1-1-1').onclick = function() {
            console.log('p1-1-1');
        };
        document.getElementById('p1-1-1-1').onclick = function(e) {
            console.log('p1-1-1-1');
            //        event.cancelBubble = true;
            event.stopPropagation();
        };

    </script>
</body>
</html>